import data, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions, Card, Button, Table, Divider, message } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getPaymentHistoryList, getRefundList } from './service';
import { Link } from 'umi';
import TableTitle from '@/components/TableTitle';
import 'moment/locale/zh-cn';
import moment from 'moment';

export default () => {
  // 控制详情弹框的显示与隐藏
  const [paymentHistoryModal, setPaymentHistoryModal] = React.useState(false)
  // 储存当前查看数据
  const [paymentHistory, setPaymentHistory] = React.useState<ColumnsItem | undefined>(undefined)
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = data.columnsData
  const RColumns: ProColumns<ColumnsItem>[] = data.refundColumns
  // 点击查看按钮保存用户的退款信息
  const [refundDetails, setRefundDetails] = React.useState([])

  // 定义操作单元格
  const columnsRender = (text: any, record: ColumnsItem) => [
    <a key='check'
      onClick={() => handleDetails(record)}
    >
      查看
    </a>
  ]
  // 定义金额单元格
  const txAmt = (text: any,) => [
    <p
      key='amount'
      style={{ textAlign: 'right', margin: 0 }}
    >
      {text}
    </p>
  ]

  // 币种单元格
  const ccy = (text: any, record: ColumnsItem) => [
    <span
      key='ccy'>
      {record.ccy}
    </span>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    // 金额
    item.dataIndex === 'txAmt' ? item.render = txAmt : undefined
    item.dataIndex === 'totalDisctAmt' ? item.render = txAmt : undefined
    item.dataIndex === 'payAmt' ? item.render = txAmt : undefined
    item.dataIndex === 'option' ? item.render = columnsRender : undefined
    item.dataIndex === 'ccy1' ? item.render = ccy : undefined
    item.dataIndex === 'ccy2' ? item.render = ccy : undefined
    item.dataIndex === 'ccy3' ? item.render = ccy : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  /**
   * 查看按钮回调
   * @param 
   */
  const handleDetails = async (record: ColumnsItem) => {
    console.log(record);
    setPaymentHistory(record)
    setPaymentHistoryModal(true)
    if (record.refundStatus) {
      const res = await getRefundList({ prodOrdNo: record.prodOrdNo, metNo: record.metNo });
      console.log(res);

      res ?
        setRefundDetails(res.body) :
        message.info('获取退款信息失败')
    }
  }
  // 定义退款详情操作单元格
  const optionRender = (text: any, record: ColumnsItem) => [
    <Link
      key='options'
      to={{
        pathname: '/discount-record',
        state: { txNo: paymentHistory?.prodOrdNo }
      }}
    >
      退还折扣查询
    </Link>
  ]
  // 列渲染样式赋值
  RColumns.forEach(item => {
    item.dataIndex === 'option' ? item.render = optionRender : undefined
    item.dataIndex === 'refundAmt' ? item.render = txAmt : undefined
    item.dataIndex === 'memRefundDisc' ? item.render = txAmt : undefined
    item.dataIndex === 'platformRefundDisc' ? item.render = txAmt : undefined
    item.dataIndex === 'recRefundDisc' ? item.render = txAmt : undefined
    item.dataIndex === 'metRefundDisc' ? item.render = txAmt : undefined
  })

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='支付交易' />}
        columns={columns}
        actionRef={actionRef}
        // 请求获取的数据
        request={
          async params => {
            let data = await getPaymentHistoryList({ ...params, pageNum: params.current })
            console.log(data);
            const result = {
              data: data.body.list,
              total: data.body.total,
            }
            return result;
          }
        }
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'paymentHistoryList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="txNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title="消费详情"
        width={1000}
        centered
        visible={paymentHistoryModal}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => setPaymentHistoryModal(false)}
          >
            确认
          </Button>
        }
        onCancel={() => setPaymentHistoryModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="商户名">{paymentHistory?.inAcNme}</Descriptions.Item>
          <Descriptions.Item label="商户账号">{paymentHistory?.payeeAcNo}</Descriptions.Item>
          <Descriptions.Item label="付款用户名">{paymentHistory?.outAcNme}</Descriptions.Item>
          <Descriptions.Item label="付款用户号">{paymentHistory?.payAcNo}</Descriptions.Item>
          <Descriptions.Item label="商品订单号">{paymentHistory?.prodOrdNo}</Descriptions.Item>
          <Descriptions.Item label="订单金额">{paymentHistory?.txAmt}</Descriptions.Item>
          <Descriptions.Item label="订单币别">{paymentHistory?.ccy}</Descriptions.Item>
          <Descriptions.Item label="折扣金额">{paymentHistory?.totalDisctAmt}</Descriptions.Item>
          <Descriptions.Item label="折扣币别">{paymentHistory?.ccy}</Descriptions.Item>
          <Descriptions.Item label="实收金额">{paymentHistory?.payAmt}</Descriptions.Item>
          <Descriptions.Item label="实收币别">{paymentHistory?.ccy}</Descriptions.Item>
          <Descriptions.Item label="交易流水">{paymentHistory?.txNo}</Descriptions.Item>
          <Descriptions.Item label="交易时间">{paymentHistory?.txTm}</Descriptions.Item>
          <Descriptions.Item label="交易结果">
            {
              paymentHistory?.txStatus === '0' ?
                '成功' :
                paymentHistory?.txStatus === '1' ?
                  '失败' :
                  null
            }
          </Descriptions.Item>
          {

            paymentHistory?.txStatus === '1' ?
              <Descriptions.Item label="失败原因"> {paymentHistory?.remarks}</Descriptions.Item> :
              null
          }
          <Descriptions.Item label="备注"> </Descriptions.Item>
        </Descriptions>

        <Link
          to={{
            pathname: '/discount-record',
            state: { txNo: paymentHistory?.prodOrdNo }
          }}
        >
          关联折扣查询
        </Link>

        {paymentHistory?.refundStatus ?
          <div>
            <div
              style={{
                margin: '20px 0 15px',
                fontSize: 16
              }}
            >
              退款详情
            </div>
            <ProTable<ColumnsItem>
              search={false}
              scroll={{ x: 900 }}
              pagination={false}
              toolBarRender={false}
              bordered
              columns={RColumns}
              dataSource={refundDetails}
              // 每行表格的key
              rowKey="refundOrdNo"
            />
          </div> : null
        }
      </Modal>
    </div>
  );
};
